<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>1.自定义插件</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<!-- 引入Vue插件 -->
		<script type="text/javascript" src="./atguigu.js"></script>
	</head>
	<body>
		<!-- 
				1.Vue插件的本质是什么？—— 本质是一个包含install方法的对象。
				2.Vue插件有啥用？—— 增强你的Vue。
				3.如何安装（应用）一个Vue的插件呢？ —— 使用Vue.use(插件)即可

		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h2>
				当前的sum值是：<span v-very-big="sum"></span>
			</h2>
			<h2>
				学校名是：<span v-very-beauty="school"></span>
			</h2>
			<h2>
				学校名是：{{school | slice2Char}}
			</h2>
			<h2>{{projectName}}</h2>
			<button @click="welcome">点我欢迎你</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			//安装（应用）插件
			Vue.use(atguigu)

			//创建vm
			new Vue({
				el:'#demo',
				data:{
					sum:1,
					school:'尚硅谷'
				}
			})
			
		</script>
	</body>
</html>